import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { Tabs, Popup } from 'antd-mobile'
import {
  getUserChannel,
  getAllChannel,
  changeActive,
} from '@/store/actions/home'
import { useInitialState } from '@/utils/hooks'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router'

const Home = () => {
  const [visible, setVisible] = useState(false)
  const history = useHistory()
  useInitialState(getAllChannel, 'channel')
  const { userChannels, active } = useInitialState(getUserChannel, 'channel')
  const dispatch = useDispatch()
  const show = () => {
    setVisible(true)
  }
  const hide = () => {
    setVisible(false)
  }
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <Tabs
        className="tabs"
        activeLineMode="fixed"
        activeKey={String(active)}
        onChange={(key) => {
          dispatch(changeActive(Number(key)))
        }}
      >
        {userChannels.map((item) => {
          return (
            <Tabs.Tab title={item.name} key={item.id}>
              <ArticleList channel_id={item.id}></ArticleList>
            </Tabs.Tab>
          )
        })}
      </Tabs>
      <div className="tabs-opration">
        <Icon
          type="iconbtn_search"
          onClick={() => {
            history.push('/search')
          }}
        />
        <Icon type="iconbtn_channel" onClick={show} />
      </div>
      <Popup position="left" visible={visible}>
        <Channels hide={hide}></Channels>
      </Popup>
    </div>
  )
}

export default Home
